<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-th-text="${user.nickname}"></title>
    <div data-th-replace="~{fragment/common :: common}"></div>
</head>
<body>
<div data-th-replace="~{fragment/header :: header}"></div>
<div class="body-container container" style="margin-top: 20px">
    <div class="col-sm-2 user-header">
        <img data-th-src="@{'/'+${user.face}}"
             style="border-radius: 100%;border: 1px solid #F2F2F2;width: 120px;height: 120px" alt="">
        <p style="margin: 5px 0px;font-size: 24px;font-weight: 400;" data-th-text="${user.nickname}"></p>
        <p style="margin: 5px 0px;">于 <span data-th-text="${#dates.format(user.createTime,'yyyy-MM-dd')}"></span> 加入</p>
        <p style="margin: 5px 0px;"
           data-th-text="${user.signature}==''?'（ 这个人懒得留下签名 ）':'（ '+${user.signature}+' ）'"></p>

        <ul class="nav nav-pills nav-stacked" style="padding-top: 10px;">
            <li class="active" data-th-class="${activeSubTab=='blog'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/blog'}">博 客</a>
            </li>
            <!--<li class="active" data-th-class="${activeSubTab=='question'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/question'}">问 答</a>
            </li>-->
        </ul>
    </div>
    <div class="col-sm-10 user-body">
        <ul class="nav nav-tabs" style="padding-top: 10px;">
            <li class="active" data-th-class="${activeSubSubTab=='new'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/blog?tab=new'}">最新</a>
            </li>
            <li data-th-class="${activeSubSubTab=='hot'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/blog?tab=hot'}">最热</a>
            </li>
            <li data-th-class="${activeSubSubTab=='category'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/blog?tab=category'}">分类</a>
            </li>
            <li data-th-class="${activeSubSubTab=='archive'?'active':''}">
                <a data-th-href="@{'/u/'+${user.username}+'/blog?tab=archive'}">归档</a>
            </li>
        </ul>
        <div data-th-switch="${activeSubSubTab}">
            <div data-th-case="'category'" style="margin-top: 10px">
                <div class="panel panel-default" data-th-each="category : ${categoryList}"
                     style="margin-bottom: 5px;border-radius: 0px;">
                    <div class="panel-heading" style="height: 40px" role="tab"
                         data-th-id="'#heading'+${category.id}">
                        <h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion"
                            data-th-href="'#collapse'+${category.id}" aria-expanded="true"
                            data-th-attr="aria-controls='collapse'+${category.id},category-id=${category.id}"
                            data-th-text="${category.name}" onclick="getCategoryArticles(this)">
                        </h4>
                    </div>
                    <div data-th-id="'collapse'+${category.id}" class="panel-collapse collapse" role="tabpanel"
                         data-th-attr="aria-labelledby='heading'+${category.id}">
                        <div class="panel-body">
                            <ol data-th-id="'articles-ul-'+${category.id}"
                                style="margin-bottom: 0;min-height: 20px"></ol>
                        </div>
                    </div>
                </div>

            </div>
            <div data-th-case="'archive'" style="margin-top: 10px">
                <ul data-th-each="articleArchive : ${articleArchiveDTOList}" style="list-style: none;padding-left: 20px;padding-top: 5px">
                    <li data-th-text="|${articleArchive.year}年${articleArchive.month+1}月|"
                    style="font-size: 20px">
                    </li>
                    <li>
                        <ul data-th-each="a : ${articleArchive.articles}"
                        style="list-style: disc;">
                            <li  style="padding: 10px 0 5px 0;;font-size: 16px">
                                <span data-th-text="${#dates.format(a.createTime,'MM-dd')} "></span>
                                <a style="color: #337AB7" data-th-href="@{'/blog/a/'+${a.id}}" data-th-text="${a.title}">

                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
            <div data-th-case="*">
                <div class="col-sm-12 card" style="padding:0;margin-top:10px;border-bottom:1px solid silver"
                     data-th-each="article : ${records}">
                    <div class="card-center">
                        <div class="card-header" style="height:70px;width: 100%">
                            <div style="height: 40px;overflow:hidden;text-overflow:ellipsis;" class="text-nowrap">
                                <a data-th-href="@{'/blog/a/'+${article.id}}"
                                   class="article-title"
                                   data-th-text="${article.title}"></a>
                            </div>
                            <div style="margin-top: 2px">
                                <span class="tag-div">
                                        <span class="glyphicon glyphicon-time"></span>
                                        <span data-th-text="${#dates.format(article.createTime,'yyyy/MM/dd HH:mm')}"></span>
                                    </span>
                                <span style="float:right;">
                                    <span class="tag-div">
                                        <span class="glyphicon glyphicon-eye-open"></span>
                                        <span data-th-text="${article.readCount}"></span>
                                    </span>

                                    <span class="tag-div">
                                        <span class="glyphicon glyphicon-comment"></span>
                                        <span data-th-text="${article.commentCount}"></span>
                                    </span>
                                    <span class="tag-div">
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                        <span data-th-text="${article.voteCount}"></span>
                                    </span>
                                </span>
                            </div>
                        </div>
                        <div class="card-body" style="margin: 0 0 8px 0" data-th-text="${article.summary}"></div>
                    </div>
                </div>
                <!-- Pagination -->
                <div data-th-replace="~{fragment/page :: page(url='/u/'+${user.username}+'/blog?tab='+${activeSubSubTab}+'&')}">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>


<div data-th-insert="~{fragment/footer :: footer}">...</div>

<script data-th-inline="javascript">
    function getCategoryArticles(obj) {
        var categoryId = $(obj).attr('category-id');
        var collapseId = $(obj).attr('aria-controls');
        // console.log(collapseId);
        var flag = $("#" + collapseId).hasClass('in');
        // console.log(flag)
        if (flag) {
            // console.log("不查询数据")
            return false;
        } else {
            // console.log("查询数据");
            $.getJSON("/u/" + [[${user.username}]] + "/c/" + categoryId, function (data) {
                // console.log(data);
                var ulId = $("#articles-ul-" + categoryId);
                $(ulId).html("");
                if (data.length == 0) {
                    $(ulId).html("无数据");
                } else {
                    $.each(data, function (i, item) {
                        $(ulId).append("<li><a href='/blog/a/" + item.id + "' target='_blank' title='" + item.summary + "' style='line-height: 30px;color: #337AB7'>" + item.title + "</a>" +
                            "<span class=\"tag-div\" style='margin-left: 10px'><span class=\"glyphicon glyphicon-time\"></span><span> " +
                            new Date(item.createTime).format("yyyy-MM-dd") + "</span></span>" +
                            "</li>")
                    });
                }
            });
        }
    }
</script>
</body>
</html>